
 @import "variables";       // 站点变量
.system-skin{
  &--dark{
    .icon-svg{
      color: $--color-text-dark !important;
    }
    
    /* placeholder
    ------------------------------ */
    input::-webkit-input-placeholder {
      color:   #c8c8c8;//$--color-text-dark;
    }
    input::-moz-input-placeholder {
      color: #c8c8c8;//$--color-text-dark;
    }
    input::-ms-input-placeholder {
      color: #c8c8c8;//$--color-text-dark;
    }

    /*滚动条*/
    ::-webkit-scrollbar {
      box-sizing: border-box;
      background-color: #fff;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      background-color: $layer-background-color-dark;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      border-width: 5px;
      border-style: solid;
      border-color: $layer-background-color-dark;
      background-color: $item-hover-color-dark;
    }

    .el-loading-mask{
      background-color:transparent;
    }

    .el-button{
      &--default{
        background: transparent;
        border: 1px solid #4B9BD7;
        color: $--color-text-dark;
      }

      &--default:hover{
        background: $item-hover-color-dark;
      }
    }

    /* el-table
      ------------------------------ */
    .el-table{
        color: $--color-text-dark;
        background: transparent;//$--background-color-dark;
    
      & thead {
        color: $--color-text-dark;
        .is-group th{
          background: #0c3250;
        }
      }

      & thead.is-group th{
        background: #0c3250;
      }
      
      
      & th, & tr {
        background: #0c3250;//transparent;//$--background-color-dark;
      }
      &--border td, &--border th, &__body-wrapper &--border.is-scrolling-left~&__fixed {
        border-right: 1px solid $table-border-color-dark;
      }
      &--border, &--group {
        border: 1px solid $table-border-color-dark;
      }

      &--border th,
      &__fixed-right-patch {
        border-bottom: 1px solid $table-border-color-dark;
      }

      & td, & th.is-leaf {
        border-bottom: 1px solid $table-border-color-dark;
      }
      //tr hover
      &--striped &__body tr &__row--striped .current-row td, &__body tr.current-row>td, &__body tr.hover-row.current-row>td, &__body tr.hover-row &__row--striped .current-row>td, &__body tr.hover-row &__row--striped>td, &__body tr.hover-row>td {
        background-color: $item-hover-color-dark;
      }
      &--border::after, &--group::after, &::before {
        content: '';
        background-color: $table-border-color-dark;
        width:0;
      }
      &__fixed-right::before, &__fixed::before {
        content: '';   width:0;
        background-color: $table-border-color-dark;
      }
      //表格树箭头
      &__expand-icon{
        color: $--color-text-dark;
      }

      &__fixed-right-patch {
        background-color: transparent;
        border-bottom: 1px solid transparent; 
      }

    }

    .el-tabs{
      &--border-card{
        background: transparent;
        border: 1px solid $table-border-color-dark;

        &>.el-tabs__header{
          background-color: transparent;
          border-bottom: 1px solid $table-border-color-dark;
        }

        &>.el-tabs__header .el-tabs__item.is-active {
          background-color: $table-border-color-dark;
          border-right-color: $table-border-color-dark;
          border-left-color: $table-border-color-dark;
        }

        &>.el-tabs__header .el-tabs__item {
          color: $--color-text-dark;
        }
  
      }

      &__item{
        color: white;
      } 

      &__item.is-active{
        color: $--color-primary;
      }

      &__item.is-disabled {
        color: #C0C4CC;
      }

    }

    /* el-card
    ------------------------------ */
    .el-card{
     // background: transparent;//$--background-color-dark;
      background: rgba(6,78,130,.3);
      border: 1px solid transparent;
      box-shadow: inset 0px 0px 50em 4em #0A73BF;//inset 0px 0px 5em 10px #0A73BF;
     // box-shadow: inset 0px 0px 20em 9em rgba(7, 75, 125, 0.9);//inset 0px 0px 15em 7em rgba(7,75,125,.5);
    }

    .el-tree{
      background: $layer-background-color-dark;
      color: $--color-text-dark; //$item-hover-color-dark

        &--highlight-current 
        .el-tree-node.is-current>.el-tree-node__content {
            background-color: $item-hover-color-dark
        }

        .el-tree-node__content:hover {
            background-color: $item-hover-color-dark
        }

        .el-tree-node.is-current>.el-tree-node__content {
          background-color: $item-hover-color-dark
        }

        .el-tree-node:focus>.el-tree-node__content {
          background-color: $item-hover-color-dark;
      }
    }

    /* el-popover
    ------------------------------ */
    .el-popover {
      background: $layer-background-color-dark;
      border: 1px solid transparent;
      box-shadow: 0px 0px 8px 2px rgba(0, 22, 42, 0.5);
    }

    .el-popper[x-placement^=bottom] {
      .popper__arrow,
      .popper__arrow::after{
        border-bottom-color:$layer-background-color-dark;
      }
    }

    .el-popper[x-placement^=top] {
      .popper__arrow,
      .popper__arrow::after{
        border-top-color:$layer-background-color-dark;
      }
    }

    /* el-dropdown
    ------------------------------ */
    .el-dropdown{
      color: $--color-text-dark;
      &-menu{
        background: $layer-background-color-dark;
        border: 1px solid transparent;
        box-shadow: 0px 0px 8px 2px rgba(0, 22, 42, 0.5);

        &__item{
          color: $--color-text-dark;
        }
        &__item:focus,&__item:not(.is-disabled):hover{
          background-color: $item-hover-color-dark;
        }

       
      }

    //   .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    //     background-color: rgb(231, 247, 251);
    //     color: rgb(60, 193, 221);
    // }
    }
    // .el-dropdown-menu{
    //   background: $layer-background-color-dark;
    //   border: 1px solid transparent;
    //   box-shadow: 0px 0px 8px 2px rgba(0, 22, 42, 0.5);
    // }

    /* el-dialog
    ------------------------------ */
    .el-dialog{
      background: $layer-background-color-dark;
      box-shadow: inset 0px 0px 4em 2em #0A73BF;//inset 0px 0px 5em 10px #0A73BF;
     // box-shadow: inset 0px 0px 20em 9em rgba(7, 75, 125, 0.9);//inset 0px 0px 15em 7em rgba(7,75,125,.5);

      &__title{
        color: $--color-text-dark;
      }

      &__headerbtn, &__close{
        color: $--color-text-dark;
      }
    }

    /* el-form
    ------------------------------ */
    .el-form{
      &-item__label {
        color: $--color-text-dark;
      }  
    }

    /* el-form
    ------------------------------ */
    .el-input,.el-textarea{
      &__inner{
        background-color: transparent;
        border: 1px solid $table-border-color-dark;
        color:$--color-text-dark;
      }
    }

    .el-input.is-disabled .el-input__inner {
       background-color:transparent;
       border-color: $table-border-color-dark;
    }

    .el-input-group__append, .el-input-group__prepend {
      background-color: #4B9BD7;
      color: #fff;
      border: 1px solid #4B9BD7;
    }

    /* el-select
    ------------------------------ */
    .el-select{
      &-dropdown{
        border: 1px solid transparent;
        background-color: $layer-background-color-dark;
        box-shadow: 0px 0px 8px 2px rgba(0, 22, 42, 0.5);

        // //select 下拉hover
        &__item.hover, 
        &__item:hover {
          background-color: $item-hover-color-dark;
        }


      }
      &__caret{
        //color: #fff !important;
        color:$--color-text-dark;
      }
      //select 下拉主体字体颜色  
      &-dropdown__item {
        color:$--color-text-dark;
      }
      &-dropdown__item.selected {
        background-color: $item-hover-color-dark;
      }
    }

    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
      background-color: $item-hover-color-dark;
    }

    /* el-checkbox
    ------------------------------ */
    .el-checkbox{
      color:$--color-text-dark;
       &__inner{
         background-color:transparent;
       }
    }

       /* el-radio
    ------------------------------ */
    .el-radio{
      color:$--color-text-dark;
       &__inner{
         background-color:transparent;
       }
    }

    /* el-pagination
    ------------------------------ */
    .el-pagination{
      &__total,&__jump{
        color:$--color-text-dark;
      }
      &.is-background .btn-next,
      &.is-background .btn-prev, 
      &.is-background .el-pager li{
        background-color: #1B70AF;
        color: #9ca3af;
      }
    }

    /* el-transfer
    ------------------------------ */
    .el-transfer {
      &-panel {
        background-color:transparent;
        border: 1px solid $table-border-color-dark;
        &__header {
          background-color:transparent;
          border-bottom: 1px solid $table-border-color-dark;
          .el-checkbox__label{
            color:$--color-text-dark !important;
          }
        }
      }
    }
    

    

    /* el-message
    ------------------------------ */
    .el-message-box {
      background-color:$layer-background-color-dark;
      border: 1px solid transparent;
      box-shadow: inset 0px 0px 2em 1em #0A73BF;
      &__title{
        color: $--color-text-dark;
      }
      &__headerbtn, &__close {
        color: $--color-text-dark;
      }
      &__content{
        color: $--color-text-dark;
      }
    }

    /* el-date-picker
    ------------------------------ */
    .el-picker{
      &-panel {
        color: $--color-text-dark;
        background-color:$layer-background-color-dark;
        border: 1px solid transparent;
        &__footer{
          border-top: 1px solid $table-border-color-dark;
          background-color: $layer-background-color-dark;
        }
        &__icon-btn {
          color: $--color-text-dark;
        }

        .el-date-table th{
          color: $--color-text-dark;
          border-bottom: solid 1px $table-border-color-dark;
        }
     
      }
    } 

    .el-time-range-picker__body{
      border: 1px solid $table-border-color-dark;
    }

    .el-time-panel__footer{
      border-top: 1px solid $table-border-color-dark;
    }

    .el-time-spinner__item:hover:not(.disabled):not(.active){
      background: $item-hover-color-dark;
    }
    .el-time-panel__content::after, .el-time-panel__content::before{
      border-top: 1px solid $table-border-color-dark;
      border-bottom: 1px solid $table-border-color-dark;
    }
    .el-time-spinner__item{
      color: $--color-text-dark;
    }
    .el-range-input{
      background-color:$layer-background-color-dark;
      color: $--color-text-dark;
    }
    .el-range-separator{
      color: $--color-text-dark;
    }

    .el-date-picker{
       &__time-header{
         border-bottom: 1px solid $table-border-color-dark;
       }
       &__header-label{
        color: $--color-text-dark;
       }
       &__header--bordered{
        border-bottom: 1px solid $table-border-color-dark;
       }
      //  .el-month-table td .cell:hover {
      //   color: #00C0FF;
      // }
      // .el-month-table td .cell{
      //    color: $--color-text-dark;
      // }
      // .el-month-table td .cell {
      //   width: 60px;
      //   height: 36px;
      //   display: block;
      //   line-height: 36px;
      //   color: white;
      //   margin: 0 auto;
      //   border-radius: 18px;
      // }
    }
    .el-time-panel{
      background-color:$layer-background-color-dark;
      border: 1px solid $table-border-color-dark;
      .el-time-spinner__item{
        color: $--color-text-dark;
      }
      .el-time-spinner__item:hover:not(.disabled):not(.active) {
        background: $item-hover-color-dark;
      }
    }

        /*el-timeline
    ------------------------------ */
    .el-timeline{
      &-item{
        &__content{
         color: $--color-text-dark;
        }
      }
     }
     
    /*el-tag
    ------------------------------ */
     .el-tag{
       background-color:#1B70AF;
       border: 1px solid transparent;
     }

     .el-tag.el-tag--info{
       color: $--color-text-dark;
     }

         /*el-upload
    ------------------------------ */
    .el-upload{
      &--picture-card{
        background-color: transparent;
      }

      &__tip{
        color: $--color-text-dark;
      }
      &-dragger{
        background-color: transparent;
      }

      &-dragger .el-upload__text{
        color: $--color-text-dark;
      }
    }

    .el-step{
      &__line{
        background-color: $table-border-color-dark;
      }
      &__head.is-wait {
        color: $--color-text-dark;
        border-color: $--color-text-dark;
      }
      &__icon{
        background: $table-border-color-dark;
      }
      &__head.is-process {
        color: wheat;
        border-color: wheat;
      }  
      &__title.is-process {
        color: wheat;
      }
      &__title.is-wait {
        color: $--color-text-dark;
      }
    }
  }

}